var data,arr=[],brr=[],brr1=[];
var xhr = new XMLHttpRequest();
var ipu1=document.getElementById('ipu1');
var ipu2=document.getElementById('ipu2');
var centCity=document.getElementById('centCity');
var abc1 = document.getElementsByClassName('abc')[0];
var centCity=document.getElementById('centCity');
send('cityList.json',true,true);
var sty=ipu1.getAttribute('style');
ipu1.addEventListener('click',function(){
    centCity.innerHTML='';
    this.setAttribute('style',sty);
    ipu2.setAttribute('style','');
    send('cityList.json',true,true);
});
ipu1.addEventListener('mouseenter',function(){
    this.style.cursor='pointer';
});
ipu2.addEventListener('mouseenter',function(){
    this.style.cursor='pointer';
});
ipu2.addEventListener('click',function(){
    centCity.innerHTML='';
    this.setAttribute('style',sty);
    ipu1.setAttribute('style','');
    send('prvoList.json',true,'');
});
//ajax请求  url  请求路径，bol 判断是否需要按序加载， bol1 判断是否有省份
function send(url,bol,bol1){
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onreadystatechange = function () {
        if (xhr.readyState != 4 || xhr.status != 200) {
            return;
        } else {
            data=xhr.response.data;
            if(bol){
                data.sort(function(a,b){
                    return a.letter.charCodeAt(0)-b.letter.charCodeAt(0);
                });
            }
            dat1(data,bol,bol1);
        }
    }
    xhr.send();
    xhr.onerror=function(){
        console.log(xhr.statusText);
    }
}
//加载数据
function dat1(data,bol,bol1){
    arr=[],brr=[],brr1=[];
    data.forEach(function(item1,index1){
        var A=item1.letter.substr(0,1);
        arr.push(A);
        var div1 = document.createElement('div');
        div1.setAttribute('class','anh');
        if(bol1){   //判断是按省份还是城市
            var div2 = document.createElement('div');
            div2.setAttribute('class','anhL');
            div1.appendChild(div2);
            div2.innerHTML=item1.name;
        }
        var div3 = document.createElement('div');
        div3.setAttribute('class','anhR');
        div1.appendChild(div3);
        var ul = document.createElement('ul');
        div3.appendChild(ul);
        if(bol1){
            item1.city.forEach(function(item2){
                var li = document.createElement('li');
                ul.appendChild(li);
                li.innerText=item2.name;
                li.addEventListener('click',function(){
                    cit('click',li,item2.name);
                });
                li.addEventListener('mouseenter',function(){
                    cit('mouseenter',li);
                });
                li.addEventListener('mouseout',function(){
                    cit('mouseout',li);
                });
            });
        }else{
            var li = document.createElement('li');
            li.setAttribute('class','lis');
            div1.setAttribute('class','div1D');
            div1.appendChild(li);
            div1.firstElementChild.innerHTML='';
            li.innerText=item1.name;
            li.addEventListener('click',function(){
                cit('click',li,item1.name);
            });
            li.addEventListener('mouseenter',function(){
                cit('mouseenter',li);
            });
            li.addEventListener('mouseout',function(){
                cit('mouseout',li);
            });
        }
        brr.push(div1);
        brr1.push(A+'+'+item1.id);
    });
    arr1(arr,bol);
    var spanJs=document.getElementsByClassName('spanJs');
    if(bol){
            for(var j=0;j<spanJs.length;j++){
                for(var i=0;i<brr.length;i++){
                    var ar1=brr1[i].split('+');
                    if(spanJs[j].innerHTML==ar1[0]){
                        spanJs[j].parentElement.appendChild(brr[i]);
                }
            }
        }
    }else{
         for(var i=0;i<spanJs.length;i++){
             var ar1=brr1[i].split('+');
             if(spanJs[i].innerHTML==ar1[0]){
                 spanJs[i].parentElement.appendChild(brr[i]);
             }
         }
    }
}
//字母
function arr1(arr,bol){
    if(bol){    //判断是否排序
        arr.sort();
    }
    arr.forEach(function(item,index){
        if(bol){
            if(arr.indexOf(item)==index){
                els(item);
            }
        }else{
            els(item);
        }
    });
    abc1.firstElementChild.innerHTML='';
    arr.sort();
    arr.forEach(function(item2,index2){
        if(arr.indexOf(item2)==index2){
            abc(item2);
        }
    });
    function els(item){
        var div1=document.createElement('div');
        div1.setAttribute('class','divBox');
        div1.setAttribute('style','display:block;');
        centCity.appendChild(div1);
        var span1=document.createElement('span');
        span1.setAttribute('class','spanJs');
        div1.appendChild(span1);
        span1.innerText=item;
    }
    function abc(a) {
        var li = document.createElement('li');
        li.innerText = a;
        abc1.firstElementChild.append(li);
        li.addEventListener('click',function(){
            show(a);
        });
        li.addEventListener('mouseenter',function(){
            this.style.cursor='pointer';
        });
    }
}
//点击字母
function show(a){
    var divBox=document.getElementsByClassName('divBox');
    for(var b=0;b<divBox.length;b++) {
        divBox[b].style.display = 'none';
        if (divBox[b].firstElementChild.innerHTML==a) {
            divBox[b].style.display = 'block';
        }
    }
}
//点击城市
function cit(event,li,item){
    if(event=='mouseenter'){
        li.style.color='#87e1f8';
        li.style.borderBottom='1px solid #ccc';
        li.style.cursor='pointer';
    }
    if(event=='mouseout'){
        li.style.color='';
        li.style.borderBottom='';
    }
    if(event=='click'){
        var sp=document.getElementsByClassName('sp')[0];
        var box=document.getElementsByClassName('box')[0];
        sp.firstElementChild.innerHTML=item;
        localStorage.setItem('cit',item);
    }
}
var sp=document.getElementsByClassName('sp')[0];
if(localStorage.getItem('cit')!=null){
    sp.firstElementChild.innerHTML=localStorage.getItem('cit');
}
window.onload=function(){
    //页面加载后js代码未执行完，所以采用延迟一秒后执行搜索操作！
    setTimeout(function(){
        var search=document.getElementById('search'),str,i=0;
        var sous2=document.getElementsByClassName('sous2')[0];
        var uli=search.nextElementSibling;
        search.onkeyup=function(e){
            uli.innerHTML='';
           if(search.value.length>0) {
               seac(search.value, uli);
               if(uli.innerHTML!=''){
                    lis(uli);
               }
           }
        };
        search.addEventListener('keydown',function(e){
            if(e.keyCode==13){
                if(uli.childElementCount==1){
                    search.value=uli.firstElementChild.innerText;
                    sp.firstElementChild.innerHTML=uli.firstElementChild.innerText;
                    localStorage.setItem('cit',uli.firstElementChild.innerText);
                    localse(uli);
                }
            };
        });
        document.addEventListener('click',function(e){
            if(e.path[1]!=uli&&e.path[0]!=search){
                uli.innerHTML='';
            }
        });
        search.addEventListener('focus',function(){
            uli.innerHTML='';
            if(localStorage.getItem('serach')!=null){
                var arr=localStorage.getItem('serach').split('|');
                arr.forEach(function(item){
                    var li=document.createElement('li');
                    li.innerText=item;
                    li.setAttribute('style','    border-bottom: 1px solid;\n' +
                        '    overflow: hidden;');
                    uli.appendChild(li);
                });
            }
            lis(uli);
        });
        function seac(item,uli){
            var anhR=document.getElementsByClassName('anhR');
            for(var c=0;c<anhR.length;c++){
                var str=anhR[c].firstElementChild.children;
                for(var d=0;d<str.length;d++){
                    if(str[d].innerHTML.indexOf(item)==0){
                        var li=document.createElement('li');
                        li.innerText=str[d].innerHTML;
                        li.setAttribute('style','    border-bottom: 1px solid;\n' +
                            '    overflow: hidden;');
                        uli.appendChild(li);
                    }
                }
            }
        }
    },1000);
function lis(uli){
    var li=uli.children;
    for(var e=0;e<li.length;e++){
        li[e].addEventListener('mouseenter',function(){
            this.style.backgroundColor='pink';
        });
        li[e].addEventListener('mouseout',function(){
            this.style.backgroundColor='';
        });
        li[e].addEventListener('click',function(){
            cit('click','',this.innerText);
            search.value=this.innerText;
            localse(uli,this.innerText);
            uli.innerHTML='';
        })
    }
}
//储存历史搜索记录；
function localse(uli,value){
    if(value!=undefined){
        uli.firstElementChild.innerText=value;
    }
    var str;
    if(localStorage.getItem('serach')!=null){
        var arr=localStorage.getItem('serach').split('|');
        if(!arr.includes(search.value)){
            str=localStorage.getItem('serach');
            str+='|'+uli.firstElementChild.innerText;
            localStorage.setItem('serach',str);
            se1();
        }
    }else{
        localStorage.setItem('serach',uli.firstElementChild.innerText);
        se1();
    }
    function se1(){
        var str1='';
        var arr=localStorage.getItem('serach').split('|');
        if(arr.length>5){
            var brr=arr.slice(arr.length - 5,arr.length);
            brr.forEach(function(it,id){
                if(id<brr.length-1){
                    str1+= it+'|';
                }else{
                    str1+=it;
                }
            });
            localStorage.setItem('serach',str1);
        }
    }
}
}


